<template>
	<view class="content" style="min-height: 100vh;background-color: #F2F3F5;" v-show="load">
		<scroll-view scroll-y class="scroll">
			<view v-if="cartList.length!=0" class="cart_view">
				<view class="item" v-for="(item,index) in cartList" :key="index">
					<radio style="transform:scale(0.7)" color="#FF0000" :checked="item.checked" @tap="checked(index)"></radio>
					<image class="img" :src="item.image"></image>
					<view class="cart_name">
						<view class="cart_name_1">{{item.productName}}</view>
						<view class="order_item_3">
							<view :class="[open==index?'order_item_4_':'order_item_4']">{{item.skuName}}</view>
							<uni-icon @tap="op(index)" :type="open==index?'arrowup':'arrowdown'" size="15" color="#888888"></uni-icon>
						</view>
						<view class="cart_name_3">
							<view style="align-items: flex-end;color: #FE0036;font-size: 24upx;">
								￥
								<view style="font-size: 32upx;font-weight: 700;">{{item.price}}</view>
							</view>
							<uni-number-box v-if="title1=='完成'" min="1" max="99" :value="item.count" @getValue="getNumber($event,index)"></uni-number-box>
							<view v-else style="color: #333333;">x{{item.count}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="visiable" class="empty">
				<image src="../../static/img/cc.png" style="width: 250upx;height: 250upx;"></image>
				<view style="color: #BFBFBF;margin-top: 10upx;">您的购物车空空如也</view>
				<view class="empty_button" @tap="navigateTo()">去逛逛</view>
			</view>
		</scroll-view>
		<view v-if="cartList.length!=0" class="buttom">
			<radio :checked="all" style="transform:scale(0.7)" @tap="allChecked()" color="#FF0000"></radio>
			<view style="color: #555555;">全选</view>
			<view class="price price2">¥ {{total}}</view>
			<view class="button1" @tap="edit()">{{title1}}</view>
			<view class="button2" @tap="sure()">{{title2}}</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '../../components/uni-number-box.vue';
	import {
		getWithParam,
		getWithParam_
	} from '../../common/request.js';
	import api from '../../common/api.js';
	import uniIcon from '../../components/uni-icon.vue';
	export default {
		data() {
			return {
				load: false,
				visiable: false,
				ch: false,
				cartList: [],
				all: false,
				total: '0.00',
				title1: '编辑',
				title2: '下单',
				open: -1
			}
		},
		components: {
			uniNumberBox,
			uniIcon
		},
		onShow() {
			this.title1 = '编辑'
			this.title2 = '下单'
			this.visiable = false
			this.total = '0.00'
			this.all = false
			this.ch = false
			this.getCartList()
		},
		methods: {
			op(index) {
				if (index == this.open) {
					this.open = -1
				} else {
					this.open = index
				}
			},
			/**
			 * 判断是否有选择
			 */
			checkedChoice() {
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].checked) {
						return true
					}
				}
				return false
			},
			getNumber(e, index) {
				getWithParam_(api.CART_UPDATE, {
					id: this.cartList[index].id,
					count: e
				}).then(res => {
					this.cartList[index].count = e
					this.total = this.getTotal()
				})
			},
			/**
			 * 获取数量
			 */
			getCount() {
				let total = 0;
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].checked) {
						total++
					}
				}
				return total
			},
			/**
			 * 拼接已经选择的ID 
			 */
			concatId() {
				let ids = []
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].checked) {
						ids.push(this.cartList[i].id)
					}
				}
				return ids.join("-")
			},
			/**
			 * 确定
			 */
			sure() {
				let id = this.concatId()
				if (id == null || id.length == 0) {
					uni.showToast({
						icon: "none",
						title: "请选择"
					})
					return
				}
				if (this.title2 == '下单') {
					uni.navigateTo({
						url: "../order/index?cartId=" + id
					})
				}
				if (this.title2.indexOf('删除') != -1) {

					getWithParam_(api.CART_DELETE, {
						"id": id
					}).then(res => {
						this.ch = false
						this.visiable = false
						this.total = 0
						this.all = false
						this.title2 = '删除(0)'
						this.getCartList()
					})
				}
			},
			/**
			 * 修改字体
			 */
			edit() {
				if (this.title1 == '编辑') {
					let count = this.getCount();
					this.title1 = '完成'
					this.title2 = '删除(' + count + ')'
				} else {
					this.title1 = '编辑'
					this.title2 = '下单'
				}
			},
			/**
			 * 所有选着按钮
			 */
			allChecked() {
				this.all = this.all ? false : true
				if (this.all) {
					for (var i = 0; i < this.cartList.length; i++) {
						this.cartList[i].checked = true
					}
				} else {
					for (var i = 0; i < this.cartList.length; i++) {
						this.cartList[i].checked = false
					}
				}
				this.total = this.getTotal()

				if (this.title2.indexOf('删除') != -1) {
					let count = this.getCount();
					this.title2 = '删除(' + count + ')'
				}
				this.ch = this.checkedChoice()
			},
			/**
			 * 获取价格
			 */
			getTotal() {
				let total = 0;
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].checked) {
						total += this.cartList[i].price * this.cartList[i].count

					}
				}
				return total.toFixed(2);
			},
			/**
			 * 是否全选
			 */
			isAllChecked() {
				for (var i = 0; i < this.cartList.length; i++) {
					if (!this.cartList[i].checked) {
						return false;
					}
				}
				return true
			},

			/**
			 * 选择
			 * @param {Object} index
			 */
			checked(index) {
				this.cartList[index].checked = this.cartList[index].checked ? false : true
				if (this.isAllChecked()) {
					this.all = true
				} else {
					this.all = false
				}
				this.total = this.getTotal()

				if (this.title2.indexOf('删除') != -1) {
					let count = this.getCount();
					this.title2 = '删除(' + count + ')'
				}
				this.ch = this.checkedChoice()

			},
			/**
			 * 获取数据
			 */
			getCartList() {
				getWithParam(api.CART_LIST).then(res => {
					if (res.data != null && res.data.length != 0) {
						for (var i = 0; i < res.data.length; i++) {
							res.data[i].checked = false
						}
						this.cartList = res.data
					} else {
						this.cartList = []
						this.visiable = true
					}
					this.load = true
				})

			},
			navigateTo() {
				uni.navigateTo({
					url: "../product/list"
				})
			}

		}
	}
</script>

<style>
	.scroll {
		height: calc(100vh - 100upx);
		width: 750upx;
		flex-direction: column;
	}

	.order_item_3 {
		width: 350upx;
		background-color: #F2F3F5;
		margin-top: 20upx;
		align-items: center;
	}

	.order_item_4_ {
		color: #888888;
		width: 300upx;
		font-size: 24upx;
		padding: 10upx 20upx;
		box-sizing: border-box;
	}

	.order_item_4 {
		color: #888888;
		width: 300upx;
		font-size: 24upx;
		padding: 10upx 20upx;
		box-sizing: border-box;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.empty_button:active {
		background-color: #FF0033;
		color: #FFFFFF;
	}

	.empty_button {
		margin-top: 10upx;
		width: 200upx;
		height: 50upx;
		justify-content: center;
		align-items: center;
		color: #FF0033;
		border: 1px solid #FF0033;
		border-radius: 50upx;
	}

	.empty {
		height: 100vh;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.price2 {
		flex: 2;
		padding-left: 30upx;
		box-sizing: border-box;
	}

	.button1:active {
		border: 1px solid #FF8C00;
		color: #FF8C00;
		background-image: linear-gradient(to right, #FFFFFF, #FFFFFF);
	}

	.button1 {
		flex: 1;
		border: 1px solid #F2F3F5;
		height: 70upx;
		border-radius: 50upx;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
		color: #FFFFFF;
		background-image: linear-gradient(to right, #F4A460, #FF8C00);
	}

	.button2:active {
		border: 1px solid #FF0033;
		color: #FF0033;
		background-image: linear-gradient(to right, #FFFFFF, #FFFFFF);
	}

	.button2 {
		flex: 1;
		border: 1px solid #F2F3F5;
		height: 70upx;
		border-radius: 50upx;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
		color: #FFFFFF;
		background-image: linear-gradient(to right, #FF0033, #FF6666);
	}

	.buttom {
		position: fixed;
		bottom: 0;
		width: 750upx;
		height: 100upx;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
		z-index: 100;
		border-top: 1px solid #F2F3F5;
	}

	.item {
		border-bottom: 1px solid #F2F3F5;
		padding: 20upx 0;
		align-items: flex-start;
	}

	.cart_view {
		flex-direction: column;
		padding: 0 30upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.img {
		width: 200upx;
		height: 200upx;
	}

	.cart_name {
		flex-direction: column;
		width: 370upx;
		padding: 0 30upx;
	}

	.cart_name_1 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #333333;
	}

	.cart_name_2 {
		margin-top: 10upx;
		padding: 10upx 20upx;
		background-color: #F2F3F5;
		color: #888888;
		font-size: 24upx;
	}

	.cart_name_3 {
		justify-content: space-between;
		align-items: center;
		margin-top: 20upx;
		height: 70upx;
	}

	.price {
		font-weight: 600;
		color: #FF0000;
		font-size: 35upx;
	}
</style>
